<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人中心</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
		<link rel="stylesheet" type="text/css" href="css/ph_percen.css" />
	</head>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/ph_percen.js" ></script>
	<style type="text/css">

	</style>

	<body>
		<div class="ph_percen_box">
			<div class="container">
				<div class="row">
					<div class="col-md-12 col-xs-12 col-sm-12" style="height: 220px;">
						<div class="user_box">
							<div class="ph_per_info_img">
								<a href="">
									<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1576106,4261121531&fm=26&gp=0.jpg" class="img-circle img-thumbnail" width="96" height="96" alt="个人头像" />
								</a>
							</div>
							<div class="ph_percen_uname">
								<span class="percen-name">我是你爸爸</span>
							</div>
							<div class="ph_percen_tag">
								<span class="ph_percen_tag_info">学生 | 安顺学院</span>
							</div>
							<div class="ph_percen_tag_2">
								<span>关注99999人</span>
								<span>|</span>
								<span>粉丝9999999人</span>
							</div>
						</div>

						<div class="ph_percen_right_box">

							<div class="ph_percen_time_box">
								<div class="ph_percen_right_time">
									<span class="ph_percen_right_icon">
									<img src="images/ph/ph_percen_clock.png" alt="时钟图标" width="50" height="50"/>
								</span>
								</div>
								<div class="ph_percen_right_title">
									<span>学习时长</span>
								</div>
								<div class="ph_percen_right_time">
									<span>10小时53分</span>
								</div>
							</div>
							<div class="ph_percen_border"></div>
							<div class="ph_percen_zan_box">
								<div class="ph_perce_zan_icon">
									<span class="ph_perce_zan_icon_img">
									<img src="images/ph/ph_percen_zan.png" alt="时钟图标" width="50" height="50"/>
								</span>
								</div>
								<div class="ph_perce_zan_tip">
									<span>获赞数量</span>
								</div>
								<div class="ph_perce_zan_con">
									<span>9999</span>
								</div>
							</div>
							<div class="ph_percen_border"></div>
							<div class="ph_percen_discuss_box">
								<div class="ph_percen_discuss_icon">
									<span>
									<img src="images/ph/ph_percen_ed.png" alt="时钟图标" width="50" height="50"/>
								</span>
								</div>
								<div class="ph_percen_discuss_tip">
									<span>主题/恢复</span>
								</div>
								<div class="ph_percen_discuss_con">
									<span>0</span>
								</div>
							</div>

						</div>

					</div>
				</div>
			</div>
		</div>
		<div class="ph_percen_cen_info">
			<div class="container">
				<div class="row" style="">
					<div class="ph_percen_top ph_cap_a ">
						<a href="" class="active">
							<span>课程<span class="ph_percen_top_num">(17)</span></span>
						</a>
					</div>
					<div class="ph_percen_top_home ph_cap_a">
						<a href="" class="active"><span>全部</span></a>
						<a href=""><span class="_li">|</span></a>
						<a href=""><span>正在进行</span></a>
						<a href=""><span class="_li">|</span></a>
						<a href=""><span>即将开始</span></a>
						<a href=""><span class="_li">|</span></a>
						<a href=""><span>已结束</span></a>
					</div>
					<div class="col-md-10 col-sm-9 col-xs-9">
						<div class="row">
							<div class="ph_percen_hover col-md-3 col-xs-3 col-sm-3">
								<div class="thumbnail">
									<a href="">
										<img src="https://img-ph-mirror.nosdn.127.net/tYhzuDVilzlDOo2bEyH_Qg==/6608226511143817333.jpg" alt="" />
									</a>
									<div class="caption ph_cap_a">
										<a href="">
											<span class="ph_cap_sp1">
											国家精品
										</span>
											<span class="ph_cap_sp2">程序设计入门——C语言</span>
											<div class="ph_cap_sp3">
												<span>安顺学院</span>
											</div>
											<div class="ph_cap_sp4">
												<span>已更新52课时</span>
											</div>
											<div class="ph_cap_sp5">
												<span>已于2020年11月11日结束</span>
											</div>

										</a>

									</div>
								</div>
							</div>
							<div class="ph_percen_hover col-md-3 col-xs-3 col-sm-3">
								<div class="thumbnail">
									<a href="">
										<img src="https://img-ph-mirror.nosdn.127.net/tYhzuDVilzlDOo2bEyH_Qg==/6608226511143817333.jpg" alt="" />
									</a>
									<div class="caption ph_cap_a">
										<a href="">
											<span class="ph_cap_sp1">
											国家精品
										</span>
											<span class="ph_cap_sp2">程序设计入门——C语言</span>
											<div class="ph_cap_sp3">
												<span>安顺学院</span>
											</div>
											<div class="ph_cap_sp4">
												<span>已更新52课时</span>
											</div>
											<div class="ph_cap_sp5">
												<span>已于2020年11月11日结束</span>
											</div>

										</a>

									</div>
								</div>
							</div>
							<div class="ph_percen_hover col-md-3 col-xs-3 col-sm-3">
								<div class="thumbnail">
									<a href="">
										<img src="https://img-ph-mirror.nosdn.127.net/tYhzuDVilzlDOo2bEyH_Qg==/6608226511143817333.jpg" alt="" />
									</a>
									<div class="caption ph_cap_a">
										<a href="">
											<span class="ph_cap_sp1">
											国家精品
										</span>
											<span class="ph_cap_sp2">程序设计入门——C语言</span>
											<div class="ph_cap_sp3">
												<span>安顺学院</span>
											</div>
											<div class="ph_cap_sp4">
												<span>已更新52课时</span>
											</div>
											<div class="ph_cap_sp5">
												<span>已于2020年11月11日结束</span>
											</div>

										</a>

									</div>
								</div>
							</div>
							<div class="ph_percen_hover col-md-3 col-xs-3 col-sm-3">
								<div class="thumbnail">
									<a href="">
										<img src="https://img-ph-mirror.nosdn.127.net/tYhzuDVilzlDOo2bEyH_Qg==/6608226511143817333.jpg" alt="" />
									</a>
									<div class="caption ph_cap_a">
										<a href="">
											<span class="ph_cap_sp1">
											国家精品
										</span>
											<span class="ph_cap_sp2">程序设计入门——C语言</span>
											<div class="ph_cap_sp3">
												<span>安顺学院</span>
											</div>
											<div class="ph_cap_sp4">
												<span>已更新52课时</span>
											</div>
											<div class="ph_cap_sp5">
												<span>已于2020年11月11日结束</span>
											</div>

										</a>

									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="ph_percen_hover col-md-3 col-xs-3 col-sm-3">
								<div class="thumbnail">
									<a href="">
										<img src="https://img-ph-mirror.nosdn.127.net/tYhzuDVilzlDOo2bEyH_Qg==/6608226511143817333.jpg" alt="" />
									</a>
									<div class="caption ph_cap_a">
										<a href="">
											<span class="ph_cap_sp1">
											国家精品
										</span>
											<span class="ph_cap_sp2">程序设计入门——C语言</span>
											<div class="ph_cap_sp3">
												<span>安顺学院</span>
											</div>
											<div class="ph_cap_sp4">
												<span>已更新52课时</span>
											</div>
											<div class="ph_cap_sp5">
												<span>已于2020年11月11日结束</span>
											</div>

										</a>

									</div>
								</div>
							</div>
							<div class="ph_percen_hover col-md-3 col-xs-3 col-sm-3">
								<div class="thumbnail">
									<a href="">
										<img src="https://img-ph-mirror.nosdn.127.net/tYhzuDVilzlDOo2bEyH_Qg==/6608226511143817333.jpg" alt="" />
									</a>
									<div class="caption ph_cap_a">
										<a href="">
											<span class="ph_cap_sp1">
											国家精品
										</span>
											<span class="ph_cap_sp2">程序设计入门——C语言</span>
											<div class="ph_cap_sp3">
												<span>安顺学院</span>
											</div>
											<div class="ph_cap_sp4">
												<span>已更新52课时</span>
											</div>
											<div class="ph_cap_sp5">
												<span>已于2020年11月11日结束</span>
											</div>

										</a>

									</div>
								</div>
							</div>
							<div class="ph_percen_hover col-md-3 col-xs-3 col-sm-3">
								<div class="thumbnail">
									<a href="">
										<img src="https://img-ph-mirror.nosdn.127.net/tYhzuDVilzlDOo2bEyH_Qg==/6608226511143817333.jpg" alt="" />
									</a>
									<div class="caption ph_cap_a">
										<a href="">
											<span class="ph_cap_sp1">
											国家精品
										</span>
											<span class="ph_cap_sp2">程序设计入门——C语言</span>
											<div class="ph_cap_sp3">
												<span>安顺学院</span>
											</div>
											<div class="ph_cap_sp4">
												<span>已更新52课时</span>
											</div>
											<div class="ph_cap_sp5">
												<span>已于2020年11月11日结束</span>
											</div>

										</a>

									</div>
								</div>
							</div>
							<div class="ph_percen_hover col-md-3 col-xs-3 col-sm-3">
								<div class="thumbnail">
									<a href="">
										<img src="https://img-ph-mirror.nosdn.127.net/tYhzuDVilzlDOo2bEyH_Qg==/6608226511143817333.jpg" alt="" />
									</a>
									<div class="caption ph_cap_a">
										<a href="">
											<span class="ph_cap_sp1">
											国家精品
										</span>
											<span class="ph_cap_sp2">程序设计入门——C语言</span>
											<div class="ph_cap_sp3">
												<span>安顺学院</span>
											</div>
											<div class="ph_cap_sp4">
												<span>已更新52课时</span>
											</div>
											<div class="ph_cap_sp5">
												<span>已于2020年11月11日结束</span>
											</div>

										</a>

									</div>
								</div>
							</div>
						</div>

						<div class="ph_percen_bottom">
							<nav aria-label="Page navigation">
								<ul class="pager">
									<li>
										<a href="#" aria-label="Previous">
											<span aria-hidden="true">上一页</span>
										</a>
									</li>
									<li class="active">
										<a href="#">1</a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<li>
										<a href="#">4</a>
									</li>
									<li>
										<a href="#">5</a>
									</li>
									<li>
										<a href="#">6</a>
									</li>
									<li>
										<a href="#">...</a>
									</li>
									<li>
										<a href="#">9</a>
									</li>
									<li>
										<a href="#" aria-label="Next">
											<span aria-hidden="true">下一页</span>
										</a>
									</li>
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</div>

		</div>
	</body>

</html>